<template>
  <div>
    <Heads title="交易成功" :rightFlag="false"></Heads>

    <div class="result-success">
      <div class="ant-result-icon">
        <svg
          viewBox="64 64 896 896"
          focusable="false"
          class
          data-icon="check-circle"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
          />
        </svg>
      </div>
      <p>恭喜 {{1}} ，这是您的第 {{5}} 次购物。</p>
      <p>祝您购物愉快！</p>
    </div>

    <div class="result-btn">
      <van-button type="danger" @click="goOrder">我的订单 ></van-button>
    </div>

    <div class="result-advertisement" v-if="advertisement">
      <van-image
        @click="handleAdvertisement"
        width="300px"
        height="200px"
        fit="cover"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590767253180&di=28cf20a46c6eb7b43d8b23b7f4295536&imgtype=0&src=http%3A%2F%2Fp0.ssl.cdn.btime.com%2Ft010f4d5e200382f97e.jpg%3Fsize%3D440x440"
      >
        <template v-slot:error>广告商空缺，waiting...</template>
      </van-image>
      <div class="result-advertisement-icon-box">
        <van-icon
          @click.self="advertisement=false"
          class="result-advertisement-icon"
          color="#fa482f"
          name="close"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

import Vue from "vue";
import { Button, Image as VanImage, Toast, Icon } from "vant";

Vue.use(Button)
  .use(VanImage)
  .use(Toast)
  .use(Icon);
export default {
  data() {
    return {
      advertisement: true
    }
  },
  methods: {
    ...mapMutations("footerModule", ["FOOTERSHOW"]),
    handleAdvertisement() {
      Toast({
        message: "感谢您对果农关心， ♥ +1",
        closeOnClick: true,
        forbidClick: true,
        duration: 500
      });
    },
    goOrder() {
      this.$router.replace({
        name: 'User-order',
        params: {
          type: 'toreceived'
        }
      })
    }
  },
  mounted() {
    this.FOOTERSHOW(false);
  },
  destroyed() {
    this.FOOTERSHOW(true);
  }
};
</script>

<style>
.result-success {
  margin-top: 40px;
  font-size: 14px;
}
.ant-result-icon {
  height: 100px;
  color: #52c41a;
  font-size: 84px;
  /* line-height: 100px; */
}
.result-btn {
  margin: 20px 0;
}
.result-advertisement {
  position: relative;
}
.result-advertisement-icon-box {
  position: absolute;
  top: -8px;
  right: 35px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  background-color: azure;
  border: azure 2px solid;
  border-radius: 50%;
  overflow: hidden;
}
</style>